<template>
  <div></div>
  <!-- 先预览，然后再自定义上传base64图片 -->
  <div class="clearfix">
    <a-upload
      listType="picture-card"
      :fileList="fileList"
      :beforeUpload="beforeUpload"
      :multiple="true"
      @remove="handleRemove"
      @preview="handlePreview"
    >
      <div v-if="fileList.length < fileListNum">
        <plus-outlined />
        <div style="margin-top: 8px">点击上传</div>
      </div>
    </a-upload>
    <!-- 放大预览窗口 -->
    <a-modal v-model:visible="previewVisible" :maskClosable="false" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, toRefs } from 'vue'
const props = withDefaults(defineProps<{ fileListNum: number; fileLists: any }>(), {
  fileListNum: 9,
  fileLists: []
})
const { fileListNum, fileLists } = toRefs(props)
const fileList: any = ref(fileLists.value)
const previewVisible = ref(false)
const previewImage = ref('')
const uploading = ref(false)

const beforeUpload = (file: any) => {
  if (fileList.value.length > fileListNum) {
    //判断上传的图片数量
    return false
  }
  exeBase(file)
  return false
}
const exeBase = async (file: any) => {
  await getBase64(file, (imageUrl: string) => {
    if (fileList.value.length < 9 && preventRepeat(imageUrl)) {
      //判断图片数量及去重
      const file2 = file
      file2.url = imageUrl
      fileList.value = [...fileList.value, file] as any
      uploading.value = false
    }
  }).then((result: any) => {
    console.log(result)
  })
}
const handleRemove = (file: any) => {
  //删除图片
  const index = fileList.value.indexOf(file)
  const newFileList = fileList.value.slice()
  newFileList.splice(index, 1)
  fileList.value = newFileList
}
const getBase64 = (file: any, callback: any) => {
  return new Promise((resolve) => {
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      callback(reader.result)
      resolve('成功')
    }
  })
}
const preventRepeat = (url: string) => {
  // 排除相同图片
  for (let i = 0, len = fileList.value.length; i < len; i++) {
    if (fileList.value[i].url === url) {
      return false
    }
  }
  return true
}
const handleCancel = () => {
  //点击关闭图片预览
  previewVisible.value = false
}
const handlePreview = async (file: any) => {
  //点击查看大图
  if (!file.url && !file.preview) {
    file.preview = await getBase64(file.originFileObj, null)
  }
  previewImage.value = file.url || file.preview
  previewVisible.value = true
}
//开始上传
const handleUpload = () => {
  console.log('fileList.value: ', fileList.value)
  const formData = new FormData()
  fileList.value.forEach((file: any) => {
    formData.append('file', file) //后面再加上token
  })
  console.log('formData: ', formData)
  uploading.value = true
  // request({
  //   url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  //   method: 'post',
  //   processData: false,
  //   data: formData,
  //   success: () => {
  //     //   this.fileList = [];图片上传后清空
  //     uploading.value = false;
  //     message.success('upload successfully.');
  //   },
  //   error: () => {
  //     uploading.value = false;
  //     message.error('upload failed.');
  //   },
  // });
}
defineExpose({
  handleUpload,
  fileList
})
</script>

<style lang="less" scoped>
:deep(.ant-upload-select-picture-card) {
}

.ant-upload-text {
  font-size: 12px;
  color: #8e8e8e;
}

// .choose-button {
//   font-size: 12px;
//   color: #262626;
// }
</style>
